﻿<template>
    <div class="page basic-info-page">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner navbar-inner-centered-title">
                <div class="title text-color-primary">检查详情</div>
                <div class="right">
                    <!-- 关闭弹窗 -->
                    <a class="link popup-close color-primary" data-popup=".basic-info-popup">
                        <i class="icon f7-icons if-not-md">xmark_circle</i>
                        <i class="icon material-icons md-only ">xmark_circle</i>
                    </a>
                </div>
            </div>
        </div>
        <div class="page-content">
            <form class="list list-strong-ios list-outline-ios " id="basic-info-from">
                <ul>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">检查号</div>
                            <div class="item-input-wrap">
                                <input name="age" type="text" id="accession-number-detail" readonly />
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">姓名</div>
                            <div class="item-input-wrap">
                                <input type="text" id="patient-name" readonly />
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">性别</div>
                            <div class="item-input-wrap">
                                <input type="text" id="patient-sex" readonly />
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">年龄</div>
                            <div class="item-input-wrap">
                                <input type="text" id="patient-age" readonly />
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">患者Id</div>
                            <div class="item-input-wrap">
                                <input name="patientId" type="text" id="patient-id" readonly />
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">门诊号</div>
                            <div class="item-input-wrap">
                                <input type="text" id="out-patient-number" readonly />
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">住院号</div>
                            <div class="item-input-wrap">
                                <input type="text" id="in-patient-number" readonly/>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-floating-label text-color-primary">检查方法</div>
                            <div class="item-input-wrap">
                                <input type="text" id="exam-methods" readonly />
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline mian-textarea">
                        <a class="link  popup-open" id="open-exam-items-popup" style="width:100%">
                            <div class="item-inner">
                                <div class="item-title item-label text-color-primary" style="color:black;">检查部位</div>
                                <div class="item-input-wrap">
                                    <textarea class=" resizable" id="exam-body-parties" readonly></textarea>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item-content item-input item-input-outline mian-textarea">
                        <a class="link  popup-open" id="open-exam-items-popup" style="width:100%">
                            <div class="item-inner">
                                <div class="item-title item-label text-color-primary" style="color:black;">检查项目</div>
                                <div class="item-input-wrap">
                                    <textarea class=" resizable" placeholder="" id="exam-items-detail" readonly></textarea>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="item-content item-input item-input-outline mian-textarea">
                        <a class="link  popup-open" id="open-exam-items-popup" style="width:100%">
                            <div class="item-inner">
                                <div class="item-title item-label text-color-primary" style="color:black;">临床诊断</div>
                                <div class="item-input-wrap">
                                    <textarea class=" resizable" placeholder="" readonly id="clinical-diagnosis"></textarea>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</template>
<script>
    export default (props, { $, $on, $f7, $h, $f7router, $theme, $update, $store }) => {
        /*
            $   Dom7 标准库
            $on 页面事件处理器绑定
            $f7 app实例对象
            $h  html模板字面量
        */
        let exam;
        $on('pageInit', (e, page) => {
            exam = $store.getters.exam.value;
            if (exam) {
                if (exam.accessionNumber) {
                    $("#accession-number-detail").val(exam.accessionNumber);
                }
                if (exam.patient.name) {
                    $("#patient-name").val(exam.patient.name);
                }
                if (exam.patient.sexCH) {
                    $("#patient-sex").val(exam.patient.sexCH);
                }
                if (exam.age) {
                    $("#patient-age").val(exam.age);
                }
                if (exam.patient.patientId) {
                    $("#patient-id").val(exam.patient.patientId);
                }
                if (exam.outPatientNumber) {
                    $("#out-patient-number").val(exam.outPatientNumber);
                }
                if (exam.inPatientNumber) {
                    $("#in-patient-number").val(exam.inPatientNumber);
                }
                if (exam.examBodyPartiesText) {
                    $("#exam-body-parties").val(exam.examBodyPartiesText);
                    setTextareaHeight($("#exam-body-parties"));
                }
                if (exam.examMethodsText) {
                    $("#exam-methods").val(exam.examMethodsText);
                }
                if (exam.examItemsText) {
                    $("#exam-items-detail").val(exam.examItemsText);
                    setTextareaHeight($("#exam-items-detail"));
                }
                if (exam.clinicalDiagnosis) {
                    $("#clinical-diagnosis").val(exam.clinicalDiagnosis);
                    setTextareaHeight($("#clinical-diagnosis"));
                }
            }
        })

        const setTextareaHeight = ($imageSee) => {
            let seeHeightStr = $imageSee.css('height');
            let seeScrollHeght = $imageSee.prop('scrollHeight');
            seeHeightStr = seeHeightStr.slice(0, seeHeightStr.length - 2);
            if (parseInt(seeHeightStr, 10) < seeScrollHeght) {
                $imageSee.css('height', seeScrollHeght + 'px');
            }
        }
        return $render;
    };
</script>